<html>
<head>
  <title>My Test Extension Options</title>
  <script src="lib/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="js/options.js" type="text/javascript"></script>
  <style type="text/css">
    body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
    .desc { color:#6b6b6b;}
    .desc a {color:#0092dd;}

    #szLogin {
      width:400px;
      height:200px;
      border:1px solid #eee;
    }

    #szLogout {
      width:400px;
      height:200px;
      border:1px solid #eee;
    }

    #settings {
      width:400px;
      height:200px;
      border:1px solid #eee;
    }

    #szDoLogin {
      float:left;
      background-image: url("chrome-extension://__MSG_@@extension_id__/images/ok_button.png");
      height: 20px;
      width: 20px;
      background-repeat: no-repeat;
      background-position: center;
    }

    #szDoLogout {
      float:left;
      background-image: url("chrome-extension://__MSG_@@extension_id__/images/ok_button.png");
      height: 20px;
      width: 20px;
      background-repeat: no-repeat;
      background-position: center;
    }

  </style>
</head>

<body>

<div id="szUserDetails">
  <div id="szUserName"></div>
</div>

<div id="szLogin">
  Login to activate extension<br/>
  Email: <input type="text" name="username" id="user_email" size="15" /><br />
  Password: <input type="password" name="passwort" id="user_password" size="15" /><br />
  <div>
    <a href="#" id="szDoLogin">Login</a>
  </div>
</div>
<div id="szLogout">
  <div id="szUserName"></div>
  <a href="#" id="szDoLogout">Logout</a>
</div>

<div id="settings">
  <div id="status"></div>
  <button id="save">Save</button>
</div>
</body>

</html>